<template>
  <div>
    <v-list-tile
      @click="toggle" class="level1 pt-0 pb-0 mt-0 mb-0" :class="{'selected':isSelected}">
      <v-list-tile-avatar>
        <v-icon v-if="model.isParent">{{open ? 'folder_open' : 'folder'}}</v-icon>
        <v-icon v-if="!model.isParent">insert_drive_file</v-icon>
      </v-list-tile-avatar>

      <v-list-tile-content>
        <v-list-tile-title v-show="!beginEdit">
          <span >{{model.name}}</span>
        </v-list-tile-title>

      <!--这里是商品编辑的地方-->
       <!-- <input v-show="beginEdit" @click.stop="" :ref="model.id" v-model="model.name"
               @blur="afterEdit" @keydown.enter="afterEdit"/>-->


      </v-list-tile-content>


      <v-list-tile-action v-if="isEdit">
        <v-btn icon @mouseover="c1='primary'" @mouseout="c1=''" :color="c1" @click.stop="addChild">
          <i class="el-icon-plus"/>
        </v-btn>
      </v-list-tile-action>
      <v-list-tile-action v-if="isEdit">
        <v-btn icon @mouseover="c2='success'" @mouseout="c2=''" :color="c2" @click.stop="editChild">
          <i class="el-icon-edit"/>
        </v-btn>
      </v-list-tile-action>
      <v-list-tile-action v-if="isEdit">
        <v-btn icon @mouseover="c3='error'" @mouseout="c3=''" :color="c3" @click.stop="deleteChild">
          <i class="el-icon-delete"/>
        </v-btn>
      </v-list-tile-action>
    </v-list-tile>

    <v-list v-if="isFolder" v-show="open" class="ml-4 pt-0 pb-0" dense transition="scale-transition">
      <tree-item
        class="item"
        v-for="(model, index) in model.children"
        :key="index"
        :model="model"
        :url="url"
        :isEdit="isEdit"
        :nodes="nodes"
        :parentState="open"
        @handleAdd="handleAdd"
        @handleEdit="handleEdit"
        @handleDelete="handleDelete"
        @handleClick="handleClick"
      >
      </tree-item>
    </v-list>

  <v-dialog v-model="show" max-width="600" scrollable v-if="show">
    <v-card>
      <v-toolbar dark dense color="primary">
        <v-toolbar-title>{{add ? '新增分类信息' : '修改分类信息'}}</v-toolbar-title>
        <v-spacer/>
        <!--这里是关闭的组件-->
        <v-btn icon @click="show = false">
          <v-icon>close</v-icon>
        </v-btn>
      </v-toolbar>
      <v-card-text class="px-5 py-2">
        <v-form v-model="valid" ref="categoryForm">
          <v-text-field
            label="分类名称"
            v-if="!beginEdit"
            v-model="child.name"
            :rules="[v => !!v || '分类名称不能为空']"
            :counter="10"
            required
          />
          <v-text-field
            label="分类名称"
            v-if="beginEdit "
            v-model="model.name"
            :rules="[v => !!v || '分类名称不能为空']"
            :counter="10"
            required
          />
          <v-layout class="my-4">
            <v-btn @click="submit" color="primary">提交</v-btn>
            <v-btn @click="clear" color="warning">重置</v-btn>
          </v-layout>
        </v-form>

      </v-card-text>
    </v-card>
  </v-dialog>
  </div>

</template>

<script>
  import Vue from 'vue'

  export default {
    name: "tree-item",
    props: {
      model: Object,
      url: String,
      isEdit: {
        type: Boolean,
        default: false
      },
      nodes: Object,
      parentState:Boolean
    },
    created() {
    },
    data: function () {
      return {
        c1: '',
        c2: '',
        c3: '',
        isSelected: false,
        open:false,
        beginEdit:false,
        show:false,
        add:false,
        valid:false,
        child:Object
      }
    },
    watch:{
      parentState(val){
        if(!val){
          this.open = val;
        }
      }
    },
    computed: {
      isFolder: function () {
        return this.model.children &&
          this.model.children.length > 0
      }
    },
    methods: {
      toggle: function () {
        // 将其它被选中项取消选中
        this.nodes.selected.isSelected = false;
        // 当前项被选中
        this.isSelected = true;
        // 保存当前选中项
        this.nodes.selected = this

        // 客户自己的点击事件回调
        this.handleClick(this.model);

        // 判断是否为顶级节点，顶级节点需要记录和替换
        if(this.model.parentId == 0){
          // 判断打开节点是否是自己
          if(this.nodes.opened && this != this.nodes.opened){
            // 不是，则关闭原来的节点
            this.nodes.opened.open = false;
          }
          // 将自己记录为打开的节点
          this.nodes.opened = this;
        }
        // 切换开闭状态
        this.open = !this.open;
        // 如果已经是叶子节点,或者自己是关闭的，或者自己已经有儿子了，结束
        if (!this.model.isParent || this.isFolder || !this.open) {
          return;
        }
        // 展开后查询子节点
        this.$http.get(this.url, {params: {pid: this.model.id}})
          .then(resp => {
          Vue.set(this.model, 'children', resp.data);
          // 封装当前节点的路径
          this.model.children.forEach(n => {
            n['path'] = [];
            this.model.path.forEach(p => n['path'].push(p));
            n['path'].push(n.name);
          });
        }).catch( e => {
          console.log(e);
        });
      },
      addChild: function () {
        this.show=true;
        this.add=true;
        this.child = {
          id: 0,
          name: '新的节点',
          parentId: this.model.id,
          isParent: false,
          sort:this.model.children? this.model.children.length + 1:1
        }
        if (!this.model.isParent) {
          Vue.set(this.model, 'children', [this.child]);
          this.model.isParent = true;
          this.open = true;
          this.handleAdd(this.child);
        } else {
          if (!this.isFolder) {
            this.$http.get(this.url, {params: {pid: this.model.id}}).then(resp => {
              Vue.set(this.model, 'children', resp.data);
              this.model.children.push(this.child);
              this.open = true;
              this.handleAdd(this.child);
            });
          } else {
            this.model.children.push(this.child);
            this.open = true;
            this.handleAdd(this.child);
          }
        }
      },
      deleteChild: function () {
        this.$message.confirm('此操作将永久删除数据，是否继续?', '提示', {
          confirmButtonText: '确定删除',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.handleDelete(this.model.id);
        }).catch(()=>{
          this.$message.info('已取消删除');
        })

      },
      editChild() {
        this.add = false;
        this.show = true;
        this.beginEdit = true;
       /* this.$nextTick(() => this.$refs[this.model.id].focus());*/
      },
      afterEdit() {
        if (this.model.beginEdit) {
          this.beginEdit = false;
          this.handleEdit(this.model.id, this.model.name);
        }
      },
      handleAdd(node) {
        this.$emit("handleAdd", node);
      },
      handleDelete(id) {
        this.$emit("handleDelete", id);
      },
      handleEdit(id, name) {
        this.$emit("handleEdit", id, name)
      },
      handleClick(node) {
        this.$emit("handleClick", node);
      },
      submit() {
        // 表单校验
        const param = {
          id:0,
          name:""
        };
        param.id = this.model.id;
        param.name = this.model.name;
        if (this.$refs.categoryForm.validate()) {
          this.$http({
            method: this.add ? 'post' : 'put',
            url: '/item/category',
            data: this.add? this.$qs.stringify(this.child):this.$qs.stringify(param)
          }).then(() => {
            // 关闭窗口
            this.$message.success("保存成功！");
            this.closeWindow();
          }).catch(() => {
            this.$message.error("保存失败！");
          });
          this.beginEdit = false;
        }
      },
      clear() {
        // 重置表单
        this.$refs.brandForm.reset();
        this.categories = [];
      },
      closeWindow() {
        this.$emit("close");
      }
    }

  }
</script>

<style scoped>
  .level1 {
    height: 40px;
  }

  .selected {
    background-color: rgba(105,184,249,0.75);
  }
</style>
